<template>
    <div class="login_whole" style="width:100%;height:100%;">
        <div class="user_content">
            <div style="flex:0 0 25%;position:relative;border: 2px solid grey">
                <div class='displayer'>
                    <div style="font-family:'SimSun';font-weight:700;color:white">
                        <div style="margin-bottom:10%;display:flex;">
                            <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="80"></el-avatar>
                            <span v-if="who_i.power=='admin'" style="font-size:30px; margin-right:10%;text-align:center;align-content:center;margin-left:10px;">管理员</span> 
                            <span v-else style="font-size:30px; margin-right:10%;text-align:center;align-content:center;">普通用户</span> 
                            <span style="font-size:20px;flex:0 0 7%;text-align:center;align-content:center;">{{who_i.name}}</span>
                        </div>
                        <div style="margin-bottom:10%">
                            <span style="font-size:15px; margin-right:10%">本系统用户共{{who_i.count}}人,   包括:</span>
                        </div>
                        <div style="font-size:16px; margin-bottom:5%">
                            <span style="font-size:14px; margin-right:6%">管理员:</span><span>{{who_i.admin}}人</span>
                        </div>
                        <div style="font-size:16px;">
                            <span style="margin-right:6%">普通用户:</span><span>{{who_i.user}}人</span>
                        </div>
                    </div>
                </div>
            </div>
            <div style="flex:1;display:flex;flex-direction:column;border-left:1px solid grey">
                <div style="width:100%; flex:0 0 20%;position:relative">
                    <div style="position:absolute; top:35%; width:100%;display:flex">
                        <el-input v-model="search_input" placeholder="请输入用户名" class='test' style="flex:0 0 20%;margin-left:5%;position:relative"></el-input>
                        <el-button @click="get_users" style="position:absolute;left:30%;">查询</el-button>
                        <el-button @click="show_all" style="position:absolute;left:38%;">显示全部</el-button>
                        <el-button @click="logout" style="position:absolute;right:8%;">退出登录</el-button>
                    </div>
                </div>
                <div class="user_table" style="background-color:white;height:100%">
                    <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column label="序号" width="80" align="center">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.id }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="用户名" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="手机号" width="200">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.mobile }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="等级权限" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.power }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="邮箱" width="210">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.mail }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="录入时间" width="210">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="最后操作时间" width="210">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.login_time }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="primary"
                                    :disabled="who_i.power=='user' || scope.row.name==who_i.name"
                                    @click="handleEdit(scope.$index, scope.row)">修改权限</el-button>
                                <el-button
                                    size="mini"
                                    type="danger"
                                    :disabled="who_i.power=='user' || scope.row.name==who_i.name"
                                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {treeList} from '@/assets/common'
import Axios from '@/my_axios';

export default {
    name: 'indexVue',
    mounted() {
        this.get_i();
        this.get_users();
    },
    data() {
        return {
            
            // 树列表
            treeList: [treeList],
        
            // 对象关系映射
            defaultProps: {
                label: 'label',
                children: 'children',
            },

            //header
            search_input: '',


            //who_i
            who_i:{},

            //user_table
            // tableData: [{
            //     id: '1',
            //     name: 'tom',
            //     mobile: '15208224989',
            //     power: 'admin',
            //     login_time: '2025-02-02',
            //     create_time: '2025-02-02'
            // }]
            tableData:null,
        }
    },
    methods: {
        get_i(){
            Axios.post('/who_i').then((resp)=> {
                this.who_i = resp.data.data
                // console.log("*****", this.who_i)
            })
        },
        get_users() {
            Axios.post('/all_users', {
                name: this.search_input, // 为空时，表示搜索全部
            }).then((resp)=> {
                // console.log('9999:', resp)
                this.tableData = resp.data.data;
                this.search_input = '';
            })
        },
        show_all(){
            this.search_input = '';
            this.get_users();
        },
        search_button() {
            console.log('yes')
        },
        handleEdit(index, row) {
            // console.log(row)

            Axios.post('/changePower', {
                id: row.id,
                power: row.power, // 为空时，表示搜索全部
            }).then((resp)=> {
                // console.log('9999:', resp)
                this.tableData = resp.data.data;
                this.get_i();
            })
        },
        handleDelete(index, row) {
            Axios.post('/del_user', {
                id: row.id,
            }).then((resp)=> {
                // console.log('9999:', resp)
                this.tableData = resp.data.data;
                this.get_i();
            })
        },
        logout() {
            Axios.delete('/session')
            .then((resp)=> {
                if(resp.data.errno == 0)
                    alert("退出成功");
                    location.reload();
            })
        }
    },
    watch: {
    }
}
</script>

<style lang='less' scoped>
.header1box {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid grey;
    font-family: 'KaiTi';
    font-size: 18px;
    cursor: pointer;
}

.tree-container /deep/ .el-tree-node__content {
    display: flex ;
    align-items: center;
    height: 26px;
    cursor: pointer;
    height:35px;
    border-bottom: 1px solid grey;
    border-left: 1px solid grey;
}
// 设置树形组件节点的定位和左内边距
.tree-container /deep/ .el-tree-node {
position: relative;
padding-left: 0px;
}

// 设置树形组件节点的 before 伪类的样式
.tree-container /deep/ .el-tree-node:before {
width: 1px;
height: 100%;
content: '';
position: absolute;
top: -38px;
bottom: 0;
left: 0;
right: auto;
border-width: 1px;
border-left: 1px solid #b8b9bb;
}

// 设置树形组件节点的 after 伪类的样式
.tree-container /deep/ .el-tree-node:after {
width: 13px;
height: 13px;
content: '';
position: absolute;
left: 0;
right: auto;
top: 12px;
bottom: auto;
border-width: 1px;
border-top: 1px solid #b8b9bb;
}

// 设置树形组件首节点的左边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:before {
border-left: none;
}

// 设置树形组件首节点的顶部边框不显示
.tree-container /deep/ .el-tree > .el-tree-node:after {
border-top: none;
}

// 设置树形组件末节点的 before 伪类的高度
.tree-container /deep/ .el-tree .el-tree-node:last-child:before {
height: 50px;
}

// 设置树形组件节点字体大小、以及取消左内边距
.tree-container /deep/ .el-tree .el-tree-node__content {
color: #000;
font-size: 15px;
font-weight: 400;
padding-left: 0 !important;
}

// 设置树形组件孩子节点左内边距
.tree-container /deep/ .el-tree .el-tree-node__children {
padding-left: 11.5px;
}

// 设置树形组件叶子节点的默认图标不显示
.tree-container /deep/ .el-tree .el-tree-node__expand-icon.is-leaf {
display: none;
}


// 设置树形组件有叶子节点的左外边距
.tree-container /deep/ .el-tree .el-tree-node__content:has(.is-leaf){
// color: aqua;
margin-left: 20px !important;
}

.user_content {
    width: 100%;
    height: 100%;
    background-image: url('../../public/user_i.jpg'); /* 设置背景图片 */
    background-size: cover; /* 确保图片覆盖整个容器 */
    background-position: center; /* 居中对齐背景图片 */
    display: flex;
    flex-direction: row;
}

.displayer {
    width: 90%;
    height: 400px;
    // background-color:aqua;
    position: absolute;
    top: 15%;
    left:10%;
}

.user_content {
    flex: 1;
}
</style>
